<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>列表页-手机页面</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="css/list.css">
</head>
<body>

<!--顶部快捷导航 start-->
<div class="shortcut">
    <div class="w">
        <div class="fl">
            <ul>
                <li>品优购欢迎您！</li>
                <li>
                    <a href="#">请登录</a>
                    <a href="#" class="style-red">免费注册</a>
                </li>
            </ul>
        </div>
        <ul class="fr">
            <li><a href="#">我的订单</a></li>
            <li class="spacer"></li>
            <li>
                <a href="#">我的品优购</a>
                <i class="icomoon"></i>
            </li>
            <li class="spacer"></li>
            <li><a href="#">品优购会员</a></li>
            <li class="spacer"></li>
            <li><a href="#">企业采购</a></li>
            <li class="spacer"></li>
            <li>
                <a href="#">关注品优购</a>
                <i class="icomoon"></i>
            </li>
            <li class="spacer"></li>
            <li>
                <a href="#">客户服务</a>
                <i class="icomoon"></i>
            </li>
            <li class="spacer"></li>
            <li>
                <a href="#">网站导航</a>
                <i class="icomoon"></i>
            </li>
        </ul>
    </div>
</div>
<!--顶部快捷导航 end-->
<!--head start-->
<header class="w">
    <div class="logo">
        <h1>
            <a href="index.html">品优购</a>
        </h1>
    </div>
    <div class="sk">
        <img src="upload/sk.png" alt="">
    </div>
    <div class="search">
        <input type="search" class="text" placeholder="请输入搜索内容...">
        <button type="button" class="btn">搜索</button>
    </div>
    <div class="hotwords">
        <a href="#" class="style-red">优惠购首发</a>
        <a href="#">亿元优惠</a>
        <a href="#">9.9元团购</a>
        <a href="#">美满99减30</a>
        <a href="#">办公用品</a>
        <a href="#">电脑</a>
        <a href="#">通信</a>
    </div>
    <div class="shopcart">
        <i class="car"> </i>我的购物车 <i class="arrow">  </i>
        <i class="count">80</i>
    </div>
</header>
<!--head end-->
<nav>
    <div class="w">
        <ul class="sk-list fl">
            <li><a href="#">品优秒杀</a></li>
            <li><a href="#">即将售罄</a></li>
            <li><a href="#">超值低价</a></li>
        </ul>
        <ul class="sk-con fl">
            <li><a href="#">女装</a></li>
            <li><a href="#" class="style-red">女鞋</a></li>
            <li><a href="#">男装</a></li>
            <li><a href="#">男鞋</a></li>
            <li><a href="#">母婴童装</a></li>
            <li><a href="#">食品</a></li>
            <li><a href="#">智能数码</a></li>
            <li><a href="#">运动户外</a></li>
            <li><a href="#" class="icomoon">更多分类</a></li>
        </ul>
    </div>
</nav>

<!--列表页内容区域-->
<div class="sk-container w">
    <div class="sk-hd">
        <img src="upload/bg_03.png" alt="">
    </div>
    <ul class="sk-bd clearfix">
        <li class="sk-goods">
            <a href="detail.html">
                <img src="upload/mobile.jpg" alt="">
                <h5 class="sk-goods-title">Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</h5>
            </a>
            <p class="sk-goods-price">
                <em>¥6088</em>
                <del>￥6988</del>
            </p>
            <div class="sk-goods-progress">
                已售87%
                <div class="bar">
                    <div class="bar-in"></div>
                </div>
                剩余29件
            </div>
            <a href="#" class="sk-goods-buy">立即购买</a>
        </li>
        <li class="sk-goods">
            <a href="detail.html">
                <img src="upload/mobile.jpg" alt="">
                <h5 class="sk-goods-title">Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</h5>
            </a>
            <p class="sk-goods-price">
                <em>¥6088</em>
                <del>￥6988</del>
            </p>
            <div class="sk-goods-progress">
                已售87%
                <div class="bar">
                    <div class="bar-in"></div>
                </div>
                剩余29件
            </div>
            <a href="#" class="sk-goods-buy">立即购买</a>
        </li>
        <li class="sk-goods">
            <img src="upload/mobile.jpg" alt="">
            <h5 class="sk-goods-title">Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</h5>
            <p class="sk-goods-price">
                <em>¥6088</em>
                <del>￥6988</del>
            </p>
            <div class="sk-goods-progress">
                已售87%
                <div class="bar">
                    <div class="bar-in"></div>
                </div>
                剩余29件
            </div>
            <a href="#" class="sk-goods-buy">立即购买</a>
        </li>
        <li class="sk-goods">
            <img src="upload/mobile.jpg" alt="">
            <h5 class="sk-goods-title">Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</h5>
            <p class="sk-goods-price">
                <em>¥6088</em>
                <del>￥6988</del>
            </p>
            <div class="sk-goods-progress">
                已售87%
                <div class="bar">
                    <div class="bar-in"></div>
                </div>
                剩余29件
            </div>
            <a href="#" class="sk-goods-buy">立即购买</a>
        </li>
        <li class="sk-goods">
            <img src="upload/mobile.jpg" alt="">
            <h5 class="sk-goods-title">Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</h5>
            <p class="sk-goods-price">
                <em>¥6088</em>
                <del>￥6988</del>
            </p>
            <div class="sk-goods-progress">
                已售87%
                <div class="bar">
                    <div class="bar-in"></div>
                </div>
                剩余29件
            </div>
            <a href="#" class="sk-goods-buy">立即购买</a>
        </li>
        <li class="sk-goods">
            <img src="upload/mobile.jpg" alt="">
            <h5 class="sk-goods-title">Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</h5>
            <p class="sk-goods-price">
                <em>¥6088</em>
                <del>￥6988</del>
            </p>
            <div class="sk-goods-progress">
                已售87%
                <div class="bar">
                    <div class="bar-in"></div>
                </div>
                剩余29件
            </div>
            <a href="#" class="sk-goods-buy">立即购买</a>
        </li>
        <li class="sk-goods">
            <img src="upload/mobile.jpg" alt="">
            <h5 class="sk-goods-title">Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</h5>
            <p class="sk-goods-price">
                <em>¥6088</em>
                <del>￥6988</del>
            </p>
            <div class="sk-goods-progress">
                已售87%
                <div class="bar">
                    <div class="bar-in"></div>
                </div>
                剩余29件
            </div>
            <a href="#" class="sk-goods-buy">立即购买</a>
        </li>
        <li class="sk-goods">
            <img src="upload/mobile.jpg" alt="">
            <h5 class="sk-goods-title">Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</h5>
            <p class="sk-goods-price">
                <em>¥6088</em>
                <del>￥6988</del>
            </p>
            <div class="sk-goods-progress">
                已售87%
                <div class="bar">
                    <div class="bar-in"></div>
                </div>
                剩余29件
            </div>
            <a href="#" class="sk-goods-buy">立即购买</a>
        </li>
        <li class="sk-goods">
            <img src="upload/mobile.jpg" alt="">
            <h5 class="sk-goods-title">Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</h5>
            <p class="sk-goods-price">
                <em>¥6088</em>
                <del>￥6988</del>
            </p>
            <div class="sk-goods-progress">
                已售87%
                <div class="bar">
                    <div class="bar-in"></div>
                </div>
                剩余29件
            </div>
            <a href="#" class="sk-goods-buy">立即购买</a>
        </li>
        <li class="sk-goods">
            <img src="upload/mobile.jpg" alt="">
            <h5 class="sk-goods-title">Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</h5>
            <p class="sk-goods-price">
                <em>¥6088</em>
                <del>￥6988</del>
            </p>
            <div class="sk-goods-progress">
                已售87%
                <div class="bar">
                    <div class="bar-in"></div>
                </div>
                剩余29件
            </div>
            <a href="#" class="sk-goods-buy">立即购买</a>
        </li>
        <li class="sk-goods">
            <img src="upload/mobile.jpg" alt="">
            <h5 class="sk-goods-title">Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</h5>
            <p class="sk-goods-price">
                <em>¥6088</em>
                <del>￥6988</del>
            </p>
            <div class="sk-goods-progress">
                已售87%
                <div class="bar">
                    <div class="bar-in"></div>
                </div>
                剩余29件
            </div>
            <a href="#" class="sk-goods-buy">立即购买</a>
        </li>
        <li class="sk-goods">
            <img src="upload/mobile.jpg" alt="">
            <h5 class="sk-goods-title">Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</h5>
            <p class="sk-goods-price">
                <em>¥6088</em>
                <del>￥6988</del>
            </p>
            <div class="sk-goods-progress">
                已售87%
                <div class="bar">
                    <div class="bar-in"></div>
                </div>
                剩余29件
            </div>
            <a href="#" class="sk-goods-buy">立即购买</a>
        </li>
    </ul>
</div>

<!--分页-->
<div class="page">
    <span class="page_num">
        <a href="#" class="pn-prev">上一页&lt&lt</a>
        <a href="#">1</a>
        <a href="#" class="current">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
        <a href="#" class="dotted">...</a>
        <a href="#" class="pn-next">下一页&gt&gt</a>
    </span>
    <span class="page_skip">
        共10页 到第
        <input type="text">
        页
        <button>确定</button>
    </span>
</div>

<footer>
    <div class="w">
        <ul class="mod_service">
            <li>
                <i class="mod_service_icon mod_service_zheng"></i>
                <div class="mod_service_title">
                    <h5>正品保障</h5>
                    <p>正品保障，提供发票</p>
                </div>
            </li>
            <li>
                <i class="mod_service_icon mod_service_kuai"></i>
                <div class="mod_service_title">
                    <h5>正品保障</h5>
                    <p>正品保障，提供发票</p>
                </div>
            </li>
            <li>
                <i class="mod_service_icon mod_service_bao"></i>
                <div class="mod_service_title">
                    <h5>正品保障</h5>
                    <p>正品保障，提供发票</p>
                </div>
            </li>
            <li>
                <i class="mod_service_icon mod_service_hao"></i>
                <div class="mod_service_title">
                    <h5>正品保障</h5>
                    <p>正品保障，提供发票</p>
                </div>
            </li>
            <li>
                <i class="mod_service_icon mod_service_sheng"></i>
                <div class="mod_service_title">
                    <h5>正品保障</h5>
                    <p>正品保障，提供发票</p>
                </div>
            </li>
        </ul>
        <div class="mod_help">
            <dl>
                <dt>购物指南</dt>
                <dd><a href="#">购物流程 </a></dd>
                <dd><a href="#">会员介绍 </a></dd>
                <dd><a href="#">生活旅行/团购 </a></dd>
                <dd><a href="#">常见问题 </a></dd>
                <dd><a href="#">大家电 </a></dd>
                <dd><a href="#">联系客服 </a></dd>
            </dl>
            <dl>
                <dt>购物指南</dt>
                <dd><a href="#">购物流程 </a></dd>
                <dd><a href="#">会员介绍 </a></dd>
                <dd><a href="#">生活旅行/团购 </a></dd>
                <dd><a href="#">常见问题 </a></dd>
                <dd><a href="#">大家电 </a></dd>
                <dd><a href="#">联系客服 </a></dd>
            </dl>
            <dl>
                <dt>购物指南</dt>
                <dd><a href="#">购物流程 </a></dd>
                <dd><a href="#">会员介绍 </a></dd>
                <dd><a href="#">生活旅行/团购 </a></dd>
                <dd><a href="#">常见问题 </a></dd>
                <dd><a href="#">大家电 </a></dd>
                <dd><a href="#">联系客服 </a></dd>
            </dl>
            <dl>
                <dt>购物指南</dt>
                <dd><a href="#">购物流程 </a></dd>
                <dd><a href="#">会员介绍 </a></dd>
                <dd><a href="#">生活旅行/团购 </a></dd>
                <dd><a href="#">常见问题 </a></dd>
                <dd><a href="#">大家电 </a></dd>
                <dd><a href="#">联系客服 </a></dd>
            </dl>
            <dl>
                <dt>购物指南</dt>
                <dd><a href="#">购物流程 </a></dd>
                <dd><a href="#">会员介绍 </a></dd>
                <dd><a href="#">生活旅行/团购 </a></dd>
                <dd><a href="#">常见问题 </a></dd>
                <dd><a href="#">大家电 </a></dd>
                <dd><a href="#">联系客服 </a></dd>
            </dl>
            <dl class="mod_help_app">
                <dt>帮助中心</dt>
                <dd>
                    <img src="upload/erweima.png" alt="">
                    <p>品优购客户端</p>
                </dd>
            </dl>
        </div>
        <div class="mod_copyright">
            <p>关于我们 | 联系我们 | 联系客服 | 商家入驻 | 营销中心 | 手机品优购 | 友情链接 | 销售联盟 | 品优购社区 | 品优购公益 | English Site | Contact U</p>
            <p>
                地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br>
                京ICP备08001421号京公网安备110108007702
            </p>
        </div>
    </div>
</footer>

</body>
</html>